<template>
  <view class="list">
    <view
      class="fixbg"
      :style="{
        'background-image':
          'url(' +
          'http://p1.music.126.net/R9D8YL9UolQ_bHDoOqMlnQ==/109951169041016187.jpg' +
          ')',
      }"
    ></view>
    <musicHead title="每日推荐" icon="true" color="black"></musicHead>
    <view class="container" v-if="!isLoding">
      <scroll-view scroll-y="true">
        <view class="list-head">
          <view class="list-head-img">
            <image
              src="http://p1.music.126.net/R9D8YL9UolQ_bHDoOqMlnQ==/109951169041016187.jpg"
            />
          </view>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <button class="list-share" open-type="share">
          <text class="iconfont"></text>分享给微信好友
        </button>
        <!-- #endif -->

        <view class="list-music">
          <view class="list-music-head">
            <text class="iconfont icon-yunhang"></text>
            <view>播放全部</view>
            <view>(共{{ recommendList.length }}首)</view>
          </view>
          <view
            class="list-music-item"
            v-for="(item, index) in recommendList"
            :key="item.id"
            @tap="goToMusicDetail(item.id)"
          >
            <view>{{ index + 1 }}</view>
            <view>
              <view>{{ item.al.name }}</view>
              <view>{{ item.ar[0].name || "" }}--{{ item.al.name || "" }}</view>
            </view>
            <text class="iconfont icon-bofang"></text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
import { getCookie, getToken } from "@/utils/token.js";
import { getEveryDayRecommend } from "@/api/index.js";
export default {
  data() {
    return {
      isLoding: true,
      recommendList: [],
    };
  },

  methods: {
    async getRecommend() {
      try {
        uni.showLoading({
          title: "Loading...",
        });
        let data = await getEveryDayRecommend();
        if (data.code == 200) {
          this.recommendList = data.data.dailySongs || [];
          this.isLoding = !this.isLoding;
          this.$store.commit("Detail/GET_SONGLIST", data.data.dailySongs);
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },

    goToMusicDetail(id) {
      console.log(id);
      uni.navigateTo({
        url: `/pages/musicDetail/index?id=${id}`,
      });
    },
  },
  onLoad(params) {
    // this.$store.dispatch("User/getLoginStatus");
    // #ifdef H5
    this.$store.dispatch("User/userStatus");
    // #endif
    if (!getToken()) {
      uni.redirectTo({
        url: "/pages/login/index",
      });
    }
    this.getRecommend();
  },
};
</script>

<style lang="less">
page {
  width: 100%;
  height: 100%;
}
.list-head-img {
  width: 100%;
  height: 250px;
  border-radius: 30rpx;
  overflow: hidden;
  margin: 0rpx !important;
  image {
    width: 100%;
    height: 100%;
  }
}
.list-head {
  display: flex;
  margin: 80rpx 30rpx;

  .list-head-text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    color: rgb(255, 255, 255, 0.7);
    view:nth-child(1) {
      //   color: #000000;
      font-size: 34rpx;
    }
    view:nth-child(2) {
      display: flex;
      align-items: center;
      margin: 20rpx 0rpx;
      font-size: 24rpx;
      image {
        width: 54rpx;
        height: 54rpx;
        border-radius: 50%;
        margin-right: 14rpx;
      }
    }
    view:nth-child(3) {
      display: -webkit-box; /*弹性伸缩盒子模型显示*/
      -webkit-box-orient: vertical; /*排列方式*/
      -webkit-line-clamp: 2; /*显示文本行数(这里控制多少行隐藏)*/
      overflow: hidden; /*溢出隐藏*/
      text-overflow: ellipsip; /*溢出显示省略号*/

      font-size: 24rpx;
    }
  }
}

.list-share {
  width: 386rpx;
  height: 78rpx;
  margin: 30rpx auto 0rpx;
  border-radius: 78rpx;
  line-height: 78rpx;
  background-color: rgba(0, 0, 0, 0.3);
  text {
    text-align: center;
    font-size: 32rpx;
  }
}

.list-music {
  display: flex;
  flex-wrap: wrap;
  margin: 50rpx 0rpx;
  background-color: white;
  border-top-left-radius: 60rpx;
  border-top-right-radius: 60rpx;

  .list-music-head {
    display: flex;
    margin: 30rpx 30rpx;
    align-items: center;
    text {
      font-size: 72rpx;
    }
    view:nth-of-type(1) {
      margin-left: 30rpx;
      margin-right: 10rpx;
      font-size: 42rpx;
    }
    view:nth-of-type(2) {
      font-size: 32rpx;
      color: #999999;
    }
  }

  .list-music-item {
    display: flex;
    width: 100%;
    // justify-content: flex-start;
    align-items: center;
    margin: 30rpx 40rpx;
    & > view:nth-child(1) {
      font-size: 42rpx;
      color: #999999;
    }
    & > view:nth-child(2) {
      display: flex;
      flex-direction: column;
      margin-left: 30rpx;

      view:nth-child(1) {
        // display: flex;
        margin-right: 20rpx;
        display: -webkit-box; /*弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical; /*排列方式*/
        -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
        overflow: hidden; /*溢出隐藏*/
        text-overflow: ellipsip; /*溢出显示省略号*/
        font-size: 32rpx;
      }
      view:nth-child(2) {
        image {
          width: 35rpx;
          height: 25rpx;
          margin-right: 5rpx;
        }
        flex: 1;
        margin-right: 20rpx;
        display: -webkit-box; /*弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical; /*排列方式*/
        -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
        overflow: hidden; /*溢出隐藏*/
        text-overflow: ellipsip; /*溢出显示省略号*/
        color: #999999;
      }
    }

    text {
      margin-left: auto;
      font-size: 58rpx;
      color: #999999;
    }
  }
}
</style>